<template>
    <h2 style="text-align: center; margin-top: 20px">派工质检</h2>
    <!-- 表单 -->
    <el-form ref="ruleFormRef" style="text-align:center" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <table style="width:100%;text-align:center">
            <!-- 第一行 -->
            <tr style="text-align:center">
                <td>
                    <el-form-item label="单据编号" prop="swfqiCode">
                        <el-input v-model="ruleForm.swfqiCode" style="width: 220px" :disabled="true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="质检日期" prop="swfiDate">
                        <el-date-picker v-model="ruleForm.swfiDate" type="date" placeholder="请选择日期" format="YYYY/MM/DD"
                            value-format="YYYY-MM-DD" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="来源类型" prop="swfiSource">
                        <el-select v-model="ruleForm.swfiSource" placeholder="请选择来源类型" style="width: 220px">
                            <el-option label="无来源" value="无来源" />
                            <el-option label="生产派工" value="生产派工" />
                        </el-select>
                    </el-form-item>
                </td>
            </tr>
            <!-- 第二行 -->
            <tr style="text-align:center">
                <td>
                    <el-form-item label="产品名称" prop="pName">
                        <el-input v-model="ruleForm.pName" style="width: 220px" @dblclick="dialogVisible3 = true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="产品编号" prop="pNumber">
                        <el-input v-model="ruleForm.pNumber" :disabled="true" style="width: 220px" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="规格型号" prop="pSpec">
                        <el-input v-model="ruleForm.pSpec" :disabled="true" style="width: 220px" />
                    </el-form-item>
                </td>
            </tr>
            <!-- 第三行 -->
            <tr style="text-align:center">
                <td>
                    <el-form-item label="质检人员" prop="swfiPeople">
                        <el-input v-model="ruleForm.swfiPeople" style="width: 220px"
                            @dblclick="dialogVisible2 = true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="制单人员" prop="swfiPersonnel">
                        <el-input v-model="ruleForm.swfiPersonnel" style="width: 220px" :disabled="true" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="制单日期" prop="personnelTime">
                        <el-date-picker v-model="ruleForm.personnelTime" type="date" :disabled="true"
                            placeholder="请选择日期" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </td>
            </tr>
            <!-- 第四行 -->
            <tr style="text-align:center">
                <td>
                    <el-form-item label="质检类型" prop="typeOfQC">
                        <el-radio-group v-model="ruleForm.typeOfQC">
                            <el-radio value="全检">全检</el-radio>
                            <el-radio value="抽检">抽检</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="质检数量" prop="theNumberOfSubmissions">
                        <el-input v-model="ruleForm.theNumberOfSubmissions" style="width: 220px"
                            @change="changeValue" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="返工数量" prop="numberOfRework">
                        <el-input v-model="ruleForm.numberOfRework" style="width: 220px" @change="changeValue" />
                    </el-form-item>
                </td>
            </tr>
            <!-- 第五行 -->
            <tr style="text-align:center">
                <td>
                    <el-form-item label="报废数量" prop="scrappedQuantity">
                        <el-input v-model="ruleForm.scrappedQuantity" style="width: 220px" @change="changeValue" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="合格数量" prop="qualifiedQuantity">
                        <el-input v-model="ruleForm.qualifiedQuantity" :disabled="true" style="width: 220px" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="合格率" prop="rate">
                        <el-input v-model="ruleForm.rate" :disabled="true" style="width: 220px" />
                    </el-form-item>
                </td>
            </tr>
            <!-- 第六行 -->
            <tr style="text-align:center">
                <td>
                    <el-form-item label="质检结果" prop="qualityInspectionResults">
                        <el-input v-model="ruleForm.qualityInspectionResults" style="width: 220px" />
                    </el-form-item>
                </td>
                <td>
                    <el-form-item label="不合格原因" prop="cause" v-show="ruleForm.qualityInspectionResults === '不合格'">
                        <el-input v-model="ruleForm.cause" style="width: 220px" type="textarea" />
                    </el-form-item>
                </td>
                <td>

                </td>
            </tr>
        </table>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                修改
            </el-button>
        </el-form-item>
    </el-form>

    <!-- 产品弹出层 -->
    <el-dialog v-model="dialogVisible3" title="产品选择" width="1200" style="height: 800px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-table :data="tableDatas" border style="width: 100%" @selection-change="handleSelectionChangeProducts">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="productId" label="序号" width="100" align="center" />
                <el-table-column prop="pCharacteristic" label="标识" width="100" align="center" />
                <el-table-column prop="pNumber" label="产品编号" align="center" width="140" />
                <el-table-column prop="pName" label="物品名称" align="center" />
                <el-table-column prop="ptClass" label="所属类别" align="center" />
                <el-table-column prop="pSpec" label="规格型号" align="center" />
                <el-table-column prop="pUnit" label="单位" align="center" />
            </el-table>
            <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="qitaPage.PageIndex" v-model:page-size="qitaPage.PageSize"
                            prev-text="上一页" next-text="下一页" :page-sizes="[3, 5, 7]" :background="true"
                            layout="total, slot,sizes" :total="qitaPage.sumCount">
                            ，当前是{{ qitaPage.PageIndex }}/{{ qitaPage.pageLast }}页，每页{{ qitaPage.PageSize }}条
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="qitaPage.PageIndex" v-model:page-size="qitaPage.PageSize"
                            prev-text="上一页" next-text="下一页" :page-sizes="[3, 5, 7]" :background="true"
                            layout=" slot, prev, pager, next" :total="qitaPage.sumCount">
                            <el-button :disabled="qitaPage.PageIndex == 1"
                                @click="qitaPage.PageIndex = 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="qitaPage.PageIndex" v-model:page-size="qitaPage.PageSize"
                            prev-text="上一页" next-text="下一页" :page-sizes="[3, 5, 7]" :background="true"
                            layout=" slot, jumper" :total="qitaPage.sumCount">
                            <el-button :disabled="qitaPage.PageIndex == qitaPage.sumCount"
                                @click="qitaPage.PageIndex = qitaPage.pageLast">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
            <!-- 保存按钮 -->
            <br>
            <el-button type="success" @click="dialogVisible3 = false">保存</el-button>
        </template>
    </el-dialog>

    <!-- 人员 -->
    <el-dialog v-model="dialogVisible2" title="库管选择" width="700" style="max-height: 1000px;"
        :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChangepeople">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" align="center" />
                <el-table-column prop="mNumber" label="档案编号" align="center" />
                <el-table-column prop="mName" label="真实姓名" align="center" />
                <el-table-column prop="users" label="登录账号" align="center" />
                <el-table-column prop="mSex" label="性别" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mSex == 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="mPhone" label="联系电话" align="center" />
                <el-table-column prop="mBirthDay" label="出生日期" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mBirthDay.substring(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sectorName" label="所在部门" align="center" />
                <el-table-column prop="postName" label="所在岗位" align="center" />
            </el-table>
            <el-button type="success" @click="dialogVisible2 = false">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted, computed, watch } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '../../../http.js';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

onMounted(() => {
    GetProduct()
    GetManpowerList()
    fanSFQI()
})
// 获取当前日期datetime类型的
const now = new Date();
const nowTime = computed(() => {
    return now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
})

const ruleForm = ref({
    sendWorkersForQualityInspectionId: route.query.id,
    "swfqiCode": "自动生成",
    "swfiDate": '',
    "swfiSource": "",
    "pName": '双击选择',
    "pNumber": "",
    "pSpec": "",
    "swfiPeople": "双击选择",
    "swfiPersonnel": localStorage.getItem('UserName'),
    "personnelTime": nowTime.value.substring(0, 10),
    "typeOfQC": "",
    "theNumberOfSubmissions": '',
    "numberOfRework": '',
    "scrappedQuantity": '',
    "qualifiedQuantity": 0,
    "rate": 0,
    "qualityInspectionResults": "",
    "cause": "",
    "addName": "string",
    "addTime": "2024-12-30T08:37:43.368Z",
    "delName": "string",
    "delTime": "2024-12-31T06:28:55.343Z",
    "isDel": false,
    "office_Id": "string",
    "user_Id": 0,
    "updName": "string",
    "updTime": "2024-12-31T06:28:55.343Z"
})

const changeValue = () => {
    ruleForm.value.rate = (Number(ruleForm.value.theNumberOfSubmissions) - Number(ruleForm.value.numberOfRework) - Number(ruleForm.value.scrappedQuantity)) / Number(ruleForm.value.theNumberOfSubmissions)
    ruleForm.value.qualifiedQuantity = (Number(ruleForm.value.theNumberOfSubmissions) - Number(ruleForm.value.numberOfRework) - Number(ruleForm.value.scrappedQuantity))
    console.log(ruleForm.value.rate)
    console.log(ruleForm.value.qualifiedQuantity)
}

// 表单验证
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    swfiDate: [
        { required: true, message: '质检日期不能为空', trigger: 'blur' },
    ],
    pName: [
        { required: true, message: '产品名称不能为空', trigger: 'blur' },
        { min: 2, max: 20, message: '字符长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    swfiPeople: [
        { required: true, message: '制单人员不能为空', trigger: 'blur' },
        { min: 2, max: 20, message: '字符长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    typeOfQC: [
        { required: true, message: '制单人员不能为空', trigger: 'blur' },
        { min: 2, max: 20, message: '字符长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    qualityInspectionResults: [
        { required: true, message: '质检结果不能为空', trigger: 'blur' },
        { min: 2, max: 20, message: '字符长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    swfiSource: [
        {
            required: true,
            message: '请选择来源类型',
            trigger: 'change',
        },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let dos = {
                dtos: ruleForm.value
            }
            axios.post(http.zblnb + '/sc/api/SWFQI/UpdateSendWorkersForQualityInspection', dos)
                .then(res => {
                    if (res.data.data == 1) {
                        ElMessage.success('修改成功')
                        return
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const dialogVisible3 = ref(false)
const handleClose = (done: () => void) => {
    ElMessageBox.confirm('确认关闭吗?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
//获取其他产品列表
const qitaPage = ref({
    PageIndex: 1,
    PageSize: 10,
    sumCount: 0,
    pageLast: 0
})

watch(qitaPage.value, () => {
    GetProduct()
})
const tableDatas = ref([])
const GetProduct = () => {
    axios.get(http.zblnb + '/erpcp/api/Product/ProductShow', {
        params: {
            PageIndex: qitaPage.value.PageIndex,
            PageSize: qitaPage.value.PageSize,
        }
    })
        .then(res => {
            tableDatas.value = res.data.data.list
            qitaPage.value.sumCount = res.data.data.sumCount
            qitaPage.value.pageLast = res.data.data.pageLast
        })
        .catch(err => {
            console.log(err)
        })
}

//多选框赋值
const handleSelectionChangeProducts = (val: any) => {
    ruleForm.value.pName = val[0].pName
    ruleForm.value.pNumber = val[0].pNumber
    ruleForm.value.pSpec = val[0].pSpec
}

const dialogVisible2 = ref(false)
//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: 1,
            Psize: 100
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
        })
}

const handleSelectionChangepeople = (val: any) => {
    ruleForm.value.swfiPeople = val[0].mName
}


const fanSFQI = () => {
    axios.get(http.zblnb + '/sc/api/SWFQI/SetSendWorkersForQualityInspection', {
        params: {
            id: route.query.id
        }
    })
        .then(res => {
            ruleForm.value = res.data.data
        })
}
</script>

<style></style>